<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- <meta http-equiv="Content-Type" content="text/html" /> -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Compare width Org 2nd.html</title>
  </head>
  <style>
    :root {
      --FONT-SIZE: 18px;
      --C-WHITE: #f3f3f3;
      --C-BLACK: #333;
      --C-RED: #f99;
      --C-GREEN: #9f9;
      --C-BLUE: #99f;
      --C-GRAY: #666;
    }

    body {
      overflow: scroll;
      background-color: var(--C-BLACK);
      color: var(--C-WHITE);
      font-family: Consolas, "Courier New", monospace;
    }

    p {
      text-align: center;
    }

    #rows {
      display: flex;
      flex-flow: column nowrap;
      /* place-content: start end; */
      place-items: start start;
      width: 100%;
      margin: 0 auto;
      padding: 0;

      .row {
        display: flex;
        min-width: 30em;
        margin: 0.5em 0 0.5em 0.5em;
        flex-flow: row nowrap;
        /* place-items: center center; */
        place-content: center right;
        font-size: var(--FONT-SIZE);

        .box {
          .hex {
            color: var(--C-WHITE);
          }
          .prev {
            color: var(--C-GREEN);
          }
          .next {
            color: var(--C-BLUE);
          }
          .brow {
            color: var(--C-RED);
          }
        }
      }
    }
  </style>

  <body>
    <p><input type="number" id="ipt" placeholder="Input Dec Number" /></p>
    <div id="rows"></div>
  </body>

  <script type="module" src="./tpo2n.mjs"></script>
  <script type="module">
    "use strict";
    import { next2 } from "./tpo2n.mjs";

    /** 0=>0,1=>3,2=>1,4=>2,3=>4,5=>5
     *     Define:
     * n 0 0 0 0 1 1 1 1  |  x
     * p 0 0 1 1 0 0 1 1  |  x
     * b 0 1 0 1 0 1 0 1  |  x
     *   | | | | | | | |  |  |
     * h 0 1 1 2 3 4 4 5  |  6
     *   | | | | | | | |  |  |
     * h'0 3 3 1 4 2 2 5  |  6
     *
     * h' = h === 0 ? 0 : 5 - ((h * 2) % 5)
     * h = h' === 5 ? 5 : (h' * 2) % 5
     */

    (() => {
      const h1 = [0, 1, 2, 3, 4, 5];
      const h2 = [0, 3, 1, 4, 2, 5];
      for (let i = 0, t1 = 0, t2 = 0; i < 5; i++) {
        t1 = h1[i] === 0 ? 0 : 5 - ((h1[i] * 2) % 5);
        t2 = h2[i] === 5 ? 5 : (h2[i] * 2) % 5;
        if (h1[i] !== t2)
          alert(`!!Not Match!! \n h1[${i}] = ${h1[i]} !== t2 = ${t2} `);
        if (h2[i] !== t1)
          alert(`!!Not Match!! \n h2[${i}] = ${h2[i]} !== t1 = ${t1} `);
      }
    })();

    const CONVERT_HEX = [
      { n: 0, p: 0, b: 0, h: 0 },
      { n: 0, p: 1, b: 1, h: 1 },
      { n: 1, p: 0, b: 1, h: 2 },
      { n: 0, p: 0, b: 1, h: 3 },
      { n: 1, p: 0, b: 0, h: 4 },
      { n: 1, p: 1, b: 1, h: 5 },
      { n: 0, p: 0, b: 0, h: 6 },
    ];

    const MAX_NUM = 1 << 20;
    const MAX_ROUND = 20;
    const objSum = (obj) => Object.values(obj).reduce((a, b) => a + b, 0);
    const arrNullStr = (arr) => arr.map((e) => (e === null ? "." : e)).join("");

    const rows = document.getElementById("rows");

    const convert = (num) => {
      let n = num.toString(3);
      let p = n.slice(-1);
      let b = n.slice(-2, -1);
      let h = n.slice(0, -2);
      return { n, p, b, h };
    };

    const drowBoxRow = (trunk) => {
      let row = document.createElement("div");
      row.className = "row";

      for (let i = 0; i < trunk.length; i++) {
        const { n, p, b, h } = trunk[i];

        let box = document.createElement("div");
        box.className = "box";

        let hex = document.createElement("div");
        hex.className = "hex";
        hex.textContent = h;
        box.appendChild(hex);
        let next = document.createElement("div");
        next.className = "next";
        next.textContent = n;
        box.appendChild(next);
        let prev = document.createElement("div");
        prev.className = "prev";
        prev.textContent = p;
        box.appendChild(prev);
        let brow = document.createElement("div");
        brow.className = "brow";
        brow.textContent = b;
        box.appendChild(brow);

        row.appendChild(box);
      }

      rows.appendChild(row);
    };

    document.getElementById("ipt").addEventListener("change", (evn) => {
      let value = Number.parseInt(evn.target.value);
      if (Number.isNaN(value)) return alert("Error Input");
      if (value < 0 || value >= MAX_NUM) return alert("Out of Range");

      rows.replaceChildren();

      var nums = Array.from(
        value.toString(2).replace(/1/g, "3").replace(/0+$/g, "6")
      ).map(Number);

      // console.log(`value = ${value},byte = ${value.toString(2)},nums = ${nums}`);

      while (nums.length >= 2) {
        drowBoxRow(nums.map((e) => CONVERT_HEX[e]));
        nums = next2(nums);
      }
    });
  </script>
</html>
